// import * as Nodes from 'three/nodes';
import Base from '@/components/Base';
import { View, Text, KayButton, Ico } from '@/components';
import SmoothScroll from '@/components/SmoothScroll';
import cx from 'classnames';
import styles from './index.less';
import { indexWebgl } from '@/modules/indexControl';

// class testPkg extends Nodes.NodeMaterial{

// }
// console.log('?????fuck', testPkg)

interface State {
  sectionShow: {
    [key: string]: boolean;
  };
  scrollY: number;
}

export default class Index extends Base<any, State> {
  public state: State = {
    sectionShow: {},
    scrollY: 0,
  };

  public async didShow() {}

  public async didMount() {
    this.init();
  }

  public render() {
    const { sectionShow, scrollY } = this.state;
    return (
      <div>
        <SmoothScroll
          onScroll={this.onScrollCallback}
          initCallback={(e) => (this.scrollRef = e)}
        >
          {/* <KayButton
            onClick={() => {
              if (this.scrollRef) {
                this.scrollRef.scrollTo('bottom');
              }
            }}
          >
            To BOTTOM
          </KayButton> */}
          <View
            className={this.cx(styles.sec, styles.sec1, {
              [styles.show]: sectionShow['1'],
            })}
            data-scroll-section
            style={{
              height: '100vh',
              // background: '#edf8fa'
            }}
          >
            <View className={styles.inner}>
              <View data-scroll data-scroll-speed="3">
                <Text className={styles.h2} type="h2">
                  Kay‘s Website
                </Text>
              </View>
              <View data-scroll data-scroll-speed="2">
                <Text className={styles.h3} type="h4">
                  扬帆起航
                </Text>
              </View>
              <View data-scroll data-scroll-speed="1">
                <View className={styles.scrollBtn}>
                  <svg
                    className={styles.svg}
                    viewBox="0 0 1024 1024"
                    width="48"
                    height="48"
                  >
                    <path d="M513.704 1024C355.576 1024 224.2 895.776 224.2 737.664L224.2 286.336C224.2 128.224 355.576 0 513.704 0 671.816 0 800.04 128.224 800.04 286.336L800.04 737.664C800.04 895.776 671.816 1024 513.704 1024ZM736.04 286.336C736.04 163.744 636.296 64 513.704 64 391.096 64 288.2 163.744 288.2 286.336L288.2 737.664C288.2 860.256 391.096 960 513.704 960 636.296 960 736.04 860.256 736.04 737.664L736.04 286.336ZM512.456 416C494.776 416 480.456 401.664 480.456 384L480.456 224C480.456 206.32 494.776 192 512.456 192 530.136 192 544.456 206.32 544.456 224L544.456 384C544.456 401.664 530.136 416 512.456 416Z"></path>
                  </svg>
                  <Text className={styles.txt} type="mini">
                    scroll down ↓
                  </Text>
                </View>
              </View>
            </View>

            {/* <Text>
              <Text className={styles.hoverTxt} type="h2">
                You know nothing John Snow!
                <br />
                You FUCK Know
                <br />
                Nothing!
              </Text>
            </Text> */}
          </View>
          <View
            className={this.cx(styles.sec, styles.sec2, {
              [styles.show]: sectionShow['2'],
            })}
            data-scroll-section
            style={{
              height: '200vh',
              // background: '#cde'
            }}
          >
            <View
              className={styles.inner}
              style={{
                height: '100vh',
              }}
            >
              <View>
                <Text className={styles.h3} type="h3">
                  人生就像一场远航
                </Text>
              </View>
              <View>
                <Text className={styles.h3} type="h3">
                  我们迎风破浪
                </Text>
              </View>
              <View>
                <Text className={styles.h3} type="h3">
                  寻找属于自己的星辰大海
                </Text>
              </View>
            </View>
            <View
              id="index-stick-dom0"
              style={{
                height: '100vh',
                justifyContent: 'center',
              }}
            >
              <View
                data-scroll
                data-scroll-sticky
                data-scroll-target="#index-stick-dom0"
              >
                <View>
                  <Text className={styles.h3} type="h3">
                    人生就像一场远航
                  </Text>
                </View>
              </View>
            </View>
          </View>
          <View
            className={this.cx(styles.sec, styles.sec3, {
              [styles.show]: sectionShow['3'],
            })}
            data-scroll-section
            style={{
              height: '100vh',
            }}
          ></View>
          <View
            className={this.cx(styles.sec, styles.sec4, {
              [styles.show]: sectionShow['4'],
            })}
            data-scroll-section
            style={{
              height: '100vh',
              // background: 'rgba(242,233,219,0.6)',
            }}
          ></View>

          <View id="index-stick-dom">
            <View
              data-scroll-section
              className={this.cx(styles.sec, styles.sec5, {
                [styles.show]: sectionShow['5'],
              })}
            >
              <View
                data-scroll
                data-scroll-sticky
                data-scroll-target="#index-stick-dom"
              >
                <View>
                  <Text>
                    sticky：
                    data-scroll-sticky（id要放到一个没有data-scroll的View上）
                  </Text>
                </View>
              </View>
            </View>
          </View>

          <View
            className={this.cx(styles.sec, styles.sec6, {
              [styles.show]: sectionShow['6'],
            })}
            data-scroll-section
            style={{
              height: '100vh',
              // background: '#ea9'
            }}
          ></View>

          <View
            className={this.cx(styles.sec, styles.sec7, {
              [styles.show]: sectionShow['7'],
            })}
            data-scroll-section
          ></View>

          <div
            className={this.cx(styles.abCircle, {
              [styles.show]: sectionShow['1'],
            })}
          >
            <svg
              viewBox="-20 -20 140 140"
              className={styles.svg}
              style={{
                transform: 'rotate(-' + scrollY / 2 + 'deg)',
              }}
            >
              <path
                fill="none"
                d="M 50 50 m -50 0 a 50 50 0 1 1 100 0 a 50 50 0 1 1 -100 0 z"
                id="textPathCir"
              />
              <text>
                <textPath xlinkHref="#textPathCir">
                  Life is Fxxking movie. HaHa
                </textPath>
              </text>
            </svg>
          </div>
        </SmoothScroll>
      </div>
    );
  }

  private scrollRef: any;

  private init = () => {
    indexWebgl.onSubscribe('afterAnimate', (status) => {
      this.scrollRef && this.scrollRef.start();
      this.setState({
        sectionShow: { '1': true },
      });
    });
  };

  private onScrollCallback = (e) => {
    // console.log('scroll:::', e);
    const { scrollY } = this.state;
    indexWebgl.scrollTo({
      y: e.scroll.y,
      direction: e.scroll.y > scrollY ? 'down' : 'up',
    });
    this.setState({
      scrollY: e.scroll.y,
    });
  };
}

// export default function IndexPage() {
//   return (
//     <div>
//       <h1 className={styles.title}>Page index</h1>
//     </div>
//   );
// }
